<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'> </i-form>
    <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { RuleObject } from 'node_modules/_ant-design-vue@2.2.7@ant-design-vue/lib/form/interface'
interface DataFormInterFace {
    name: string;
    number: string;
    textarea: string;
    mobile:string;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                name: '',
                number: '',
                textarea: '',
                mobile: ''
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '用户名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    ],
                    width: 12,
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '用户名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    ],
                    width: 12,
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'input', // form表单类型
                    label: '手机号', // 字段描述信息
                    field: 'mobile', // form 对应字段
                    rules: [
                        {
                            required: true,
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                    width: 12,
                    options: {
                        maxlength: 11
                    }
                },
                {
                    type: 'inputNumber', // form表单类型
                    label: '数字类型', // 字段描述信息
                    field: 'number', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    ],
                    width: 12,
                    options: {
                        maxlength: 5
                    }
                },
                {
                    type: 'textarea', // form表单类型
                    label: '多行文本框', // 字段描述信息
                    field: 'textarea', // form 对应字段
                    width: 24,
                    options: {
                        maxlength: 200
                    }
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        import { RegExpValid, regexpPromiseMsg } from 'wd-platform-utils'
        <i-form ref='myForm' :dataForm='dataForm'> </i-form> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                name: '',
                number: '',
                textarea: '',
                mobile:''
            },
            fieldDataList: [
                {
                    type: 'input', // form表单类型
                    label: '用户名', // 字段描述信息
                    field: 'name', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    ],
                     width: 12,
                    options: {
                        maxlength: 30
                    }
                },
                 {
                    type: 'input', // form表单类型
                    label: '手机号', // 字段描述信息
                    field: 'mobile', // form 对应字段
                    rules: [
                       {
                            required: true,
                            validator: (rule:RuleObject, value:string) => {
                                return regexpPromiseMsg(RegExpValid.REGEX_MOBILE, value, '手机号不正确')
                            },
                            trigger: 'blur'
                        }
                    ],
                     width: 12,
                    options: {
                        maxlength: 30
                    }
                },
                {
                    type: 'inputNumber', // form表单类型
                    label: '数字类型', // 字段描述信息
                    field: 'number', // form 对应字段
                    rules: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    ],
                     width: 12,
                    options: {
                        maxlength: 5
                    }
                },
                {
                    type: 'textarea', // form表单类型
                    label: '多行文本框', // 字段描述信息
                    field: 'textarea', // form 对应字段
                    options: {
                        maxlength: 200
                    },
                     width: 24
                }
            ]
        }) `
                }

            ]
        }
        return {
            myForm,
            dataForm,
            libDocData
        }
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
